<template>
  <div class="app-container">
    <div class="header">
      <div class="word">
        <div class="w1">
          农事活动系统
        </div>
        <div class="w2">
          在农事活动系统中你可以查看农事活动等基本信息，同时还可以实现修改农事活动，添加农事活动信息等功能，提供一套可行的农事活动信息方案
        </div>
        <div class="w2">
          农事活动系统是种植系统中重要的一环,它可以为我们提供农事活动的信息，为下一步做准备
        </div>
      </div>
      <img src="../../static/u=2179590687,2836296523&fm=253&fmt=auto&app=138&f=JPEG.webp" class="imgDri">
    </div>
    <el-select v-model="pageIndex">
      <el-option v-for="(page,index) in pageList" :key="page.path" :value="index" :label="page.name">
      </el-option>
    </el-select>
    <Fertilization v-if="pageIndex == 0"></Fertilization>
    <AgriculturalControl v-else-if="pageIndex == 1"></AgriculturalControl>
  </div>
</template>

<script>
import Fertilization from "../fertilization/index.vue";
import AgriculturalControl from "../agriculturalControl/index.vue";
export default {
  name: 'Arg',
  components: { Fertilization, AgriculturalControl },
  data () {
    return {
      pageIndex: 0,
      pageList: [
        { name: '施肥' }, { name: '施药' }
      ]
    }
  },
  async mounted () {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 350px;
  // border: 1px solid black;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}

.form {
  display: flex;
  flex-wrap: wrap;
}

.sel {
  width: 360px;
  display: flex;
  height: 50px;
  justify-content: flex-end;
  align-content: center;
}

.sel2 {
  width: 240px;
}

.page {
  width: 100%;
  display: flex;
  justify-content: right;
}

.imgDri {
  height: 300px;
  width: 400px;
}

.w1 {
  height: 80px;
  font-size: 25px;
  font-weight: 350;
}

.w2 {
  height: 50px;
  font-size: 15px;
  font-weight: 250;
}

.searchHead {
  display: flex;
  justify-content: space-between;
}

.searchIuput {
  width: 350px;
}

.sel3 {
  width: 120px;
}
</style>

